<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app-12">
        <!-- 当使用 v-bind 绑定内联样式时：
            1. 使用 {} 定义 style 样式，才能获取 data 的值， {} 要遵循 JSON 格式
            2. {} 中不在使用 style 样式属性名 “font-size”, 而要使用对应的 js 属性名
            border-style-width --- borderStyleWidth
         -->
        <div v-bind:style="{color: colorName, fontSize: fontsize + 'px' }">
            Hello World!
        </div>
        <!-- 我们可以直接为 style 属性绑定一个 data 中定义好的内联样式的字符串 -->
        <div v-bind:style="myStyle1">
            Hello World!!
        </div>
        <!-- 我们可以直接为 style 属性绑定一个 data 中定义好的内联样式的对象 -->
        <div v-bind:style="myStyle2">
            Hello World!!!
        </div>
        <!-- 我们可以在同一个 style 属性通过数组引用多个内联样式的对象 -->
        <div v-bind:style="[myStyle2, myStyle3]">
            Hello World!!!!
        </div>
    </div>


    <script type="text/javascript">
        var vm = new Vue({
            el: '#app-12',
            data: {
                colorName: "yellow",
                fontsize: "40",
                myStyle1: "color: orange; font-size: 50px",
                myStyle2: {
                    color: "blue",
                    fontSize: "60px"
                },
                myStyle3: {
                    textShadow: "orange 3px 3px 5px"
                }
            }
        })

    </script>
</body>
</html>